<template>
  <ul class="list">
    <div  v-for="item in reyinglist" :key="item.id">
      <router-link :to="'/item/' + item.id">
      <div class="con1">
        <li class="item">
          <div class="item_img"><img :src="item.img" /></div>
          <div class="item_text">
            <div class="item_txt1">{{ item.nm }}</div>
            <div class="item_txt2">
              观众评 <span id="san">{{ item.sc }}</span>
            </div>
            <div class="item_txt3">主演：{{ item.star }}</div>
            <div class="item_txt4">{{ item.showInfo }}</div>
          </div>
          <div class="item_btn">
            <div v-if="item.preShow" class="btn ysbtn">预售</div>
            <div v-else class="btn gpbtn">购票</div>
          </div>
        </li>
      </div>
    </router-link>
  </div>
     
    </ul>
</template>

<script>
export default {
    name:"reying",
    props:["reyinglist"],//获取从父组件传过来的参数
}
</script>

<style scoped>
ul,li{
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}
.list a li{
  display: flex;
  justify-content: space-around;
  color: #333;
}
.item {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
  border-bottom: 1px solid rgb(202, 195, 195);
  justify-content: space-around;
}

.item .item_img {
  width: 20%;
}

.item .item_img img {
  width: 100%;
}

.item .item_text {
  width: 50%;
  color: #666666;
}

.item .item_text .item_txt1 {
  color: black;
  font-size: 20px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .item_text .item_txt2 {
  margin-top: 0.3125rem;
}

#san {
  color: #faaf00;
  font-weight: 800;
}

.item .item_text .item_txt3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .item_text .item_txt4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .item_btn {
  width: 20%;
  display: flex;
  align-items: center;
}

.item .item_btn .btn {
  width: 2.933333rem;
  height: 1.866667rem;
  font-size: 12px;
  color: #fff;
  border-radius: 5px;
  line-height: 1.866667rem;
  text-align: center;
}

.item .item_btn .gpbtn {
  background: #f03d37;
  margin-left: 15px;
}

.item .item_btn .ysbtn {
  background: #3c9fe6;
  margin-left: 15px;
}
</style>